<template>
  <div>
    <!-- 
      布局
     -->
     <h1>欢迎光临</h1>
     <table border="1">
       <tr>
       <th> 苹果 {{ price }}￥/斤，折扣 &lt; {{dPrice }}折 &gt; </th>
       </tr>
       <tr>
         <td>请输入你要购买的斤数
           <input type="text" v-model="num">
         </td>
       </tr>
       <tr>
         <td>
           <button @click="btnFn">结账买单~</button>
         </td>
       </tr>
       <tr>
         <td>总结账： 总价： {{ totalPrice }}￥元 折后价： {{disCount}}￥元 省了：{{ sPrice }}￥元</td>
       </tr>
     </table>
  </div>
</template>

<script>
/***
点击按钮，实现计算价格
1、给按钮绑定点击事件，并声明事件处理函数
2、根据用户输入的数量，计算总价，一起折后价和省了多少钱

*/ 
export default {
  data(){
    return {
      price: 10,
      dPrice: 8,
      num: 0,
      totalPrice: 0,
      disCount: 0,
      sPrice: 0
    }
  },
  methods: {
    btnFn(){
      this.totalPrice = this.price * this.num;
      this.disCount = this.totalPrice*(this.dPrice*0.1);
      this.sPrice = this.totalPrice - this.disCount;
    }
  }
}
</script>

<style>

</style>